<template>
	<div class="darkBg">
		<div class="banner">
			<image :src="banner" mode="widthFix"></image>
		</div>
		<div class="container">
			<div class="zlList">
				<div class="item" v-for="(item,index) in pdfList" :key="index" @click="read(item)">
					<div class="img">
						<image :src="item.img" mode="widthFix"></image>
						<div class="state">{{item.state}}</div>
					</div>
					<div class="intro">
						<h4>{{item.title}}</h4>
						<div class="btn">
							<u-button text="领取PDF" size="small" plain type="success" :customStyle="btnStyle" @click.native.stop="showEwm()" ></u-button>
							<u-button text="点击查看" size="small" type="error" :customStyle="btnStyle"></u-button>
						</div>
					</div>
				</div>
			</div>
			<div class="comList">
				<u-popup :show="ewmShow" @close="ewmShow = false"  mode="center" >
					<view>
						<div class="ewmBox">
							<image src="https://www.baixuemianshi.com/zhuanti/images/lynn.jpg" mode="widthFix" show-menu-by-longpress="true"></image>
							<p>添加老师微信 <br>	领取PDF资料</p>
						</div>
					</view>
				</u-popup>
			</div>
		</div>
		
		<u-modal
			:show="showLogin" 
			title="体验次数已用尽,请输入口令码" 
			:cancelText="'暂不登录'" 
			:showCancelButton="false"
			:showConfirmButton="false" 
			>
			<view class="slot-confirmButton">
				<div class="modalBtns">
					<div>
						<u--input
						    placeholder="请输入口令码"
						    border="surround"
						    v-model="klcode"
						  ></u--input>
					</div>
					<u-button type="error" text="确定" @click="checkKlm"></u-button>
					<div class="ewmBox">
						<image :src="userInfo.ewm"show-menu-by-longpress="true" mode="widthFix"></image>
						<p>长按识别二维码<br>添加助教微信领取口令码</p>
					</div>
				</div>
				
			</view>
		</u-modal>
		
		<share></share>
		<u-toast ref="uToast"></u-toast>
		
	</div>
</template>

<script>
import { mapActions } from 'vuex';
import share from '../../common/share/index.vue';
const db = wx.cloud.database()
export default {
	data() {
		return {
			banner:"https://www.baixuemianshi.com/zhuanti/images/banner_zl.jpg?" + new Date(),
			klcode:"",
			name: "",
			searchNum: 0,
			userInfo: {
				ewm: "https://www.baixuemianshi.com/zhuanti/images/lynn.jpg"
			},
			pdfList: [],
			scrollTop: 0,
			style3:{
				width: "45%"
			},
			showLogin: false,
			btnStyle: {
				"width": "46%"
			},
			ewmShow: false,
			page: -1
		};
	},
	onShareAppMessage(options) {
		let shareObj = {
		    title: "雪恒白雪-面试资料领取",
		    path: '/pages/sk-tools/zllq/index?name=' + this.name,
		    imageUrl: ''   
		};
		return shareObj
	},
	onShareTimeline(res) {
		let that = this;
		return {
			title: '雪恒白雪-面试资料领取',
			query: "name=" + that.name
		};
	},
	onShow() {},
	onPullDownRefresh() {
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onPageScroll(e) {
		let that = this;
		that.scrollTop = e.scrollTop;
	},
	onLoad(options) {
		if (!options) {} else {
			this.name = options.name
		}
	},
	computed: {
		searchtimes() {
			return this.$store.getters.searchtimes ? this.$store.getters.searchtimes : '';
		},
		userphone() {
			return this.$store.getters.userphone ? this.$store.getters.userphone : '';
		},
		useropenid() {
			return this.$store.getters.useropenid ? this.$store.getters.useropenid : '';
		},
		username() {
			return this.$store.getters.username ? this.$store.getters.username : '';
		},
		loginpage() {
			return this.$store.getters.loginpage ? this.$store.getters.loginpage : '';
		}
	},
	mounted() {

	},
	watch: {
		userphone(val){
			
		}
	},
	created() {
		let that = this;
		that.getPdfs()
	},
	methods: {
		...mapActions(['LogSetSearchtimes','LogSetPhone','LogSetOpenid','LogSetName','LogSetPage']),

		
		getPdfs(){
			let that = this
			that.page += 1
			db.collection('pdf_cols').skip(that.page * 10).limit(10).get({
				success: res => {
					console.log(res,that.page)
					if(res.data.length > 0){
						that.pdfList = that.pdfList.concat(res.data)
					}else{
						uni.showToast({
							icon:"error",
							title:"没有更多啦~"
						})
					}
				}
			})
		},
		read(b){
			let that = this
			
			uni.navigateTo({
				url: "./zlList?zlid=" + b._id
			})
			
		},
		showEwm(){
			this.ewmShow = true
		},
		showToast(type, info) {
			this.$refs.uToast.show({
				type: type,
				icon: false,
				title: '失败主题',
				message: info,
			})
		},
		imgView(imgUrl) {
			wx.previewImage({
				urls: [imgUrl], //需要预览的图片http链接列表，注意是数组
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {}
			});
		}
	},
	components: { share}
};
</script>

<style>
@import url(./index.css);
</style>
